/*
    loader:1.下载 2.使用（配置loader）
    plugins: 1.下载 2.引入 3.使用
*/

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.js',
    output: {
        filename:'built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            //loader的配置
            {
                // 匹配那些文件
                test: /\.less$/,
                use: [
                    // use数组中loader执行顺序:从右到左，从上到下依次执行
                    // 创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                //处理图片资源
                //问题：默认处理不了html中img的图片
                test:/\.(jpg|png|gif)$/,
                //使用一个loader
                // 下载 url-loader file-loader
                loader: 'url-loader',
                options: {
                    // 图片大小小于8kb，就会被base64处理
                    // 优点：减少请求数量（减轻服务器压力）
                    // 缺点： 图片体积会更大（文件请求速度更慢）
                    limit: 8 * 1024,
                    //解决： 关闭url-loader的es6模块化，使用commonjs解析；
                    esModule:false,
                    //给图片进行重命名
                    // [hash:10]取图片的hash的前10位
                    // [ext]取文件原来的扩展名
                    name:'[hash:10].[ext]'
                    //问题： 因为url-loader默认使用es6模块化解析
                }
            },
            {
                test:/\.html$/,
                //处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
                loader:'html-loader',
                
               

            }
        ]
    },
    plugins:[
        //plugins的配置
        //html-webpack-plugin
        // 功能：默认会创建一个空的html,自动引入打包输出的所有资源(JS/CSS)
        // 需求：需要有结构的HTML文件
        new HtmlWebpackPlugin({
            //复制'./src/index.html文件,并自动引入打包输出的所有资源（JS/css
            template:'./src/index.html'
        })
    ],
    mode:'development'
}